<template>
	<view class="page-wrapper">
		<view class="btn-group">
			<view class="btn-wrapper">
				<button type="default" @click="handlrGetLoacation">getLocation</button>
			</view>
			<view class="btn-wrapper">
				<button type="default" @click="handleChooseLocation">chooselocation</button>
			</view>
			<view class="btn-wrapper">
				<button type="default" open-type="getUserInfo" @getuserinfo="getUserInfo">获取用户信息</button>
			</view>
			<view class="btn-wrapper">
				<button type="default" open-type="getPhoneNumber" getPhoneNumber="getUserphone">获取用户手机号</button>
			</view>
		</view>
		<view class="address-view" v-if="getAddress.latitude">
			<view class="title">
				获取本机位置信息：
			</view>
				<text>纬度：</text>
				<view class="value-wrapper">
					{{getAddress.latitude}}
				</view>
				<text>精度：</text>
				<view class="value-wrapper">
					{{getAddress.longitude}}
				</view>
		</view>
		<view class="address-view" v-if="chooseAddress.latitude">
			<view class="title">
				主动选择位置信息：
			</view>
				<text>位置名称：</text>
				<view class="value-wrapper">
					{{chooseAddress.name}}
				</view>
				<text>详细地址：</text>
				<view class="value-wrapper">
					{{chooseAddress.address}}
				</view>
				<text>纬度：</text>
				<view class="value-wrapper">
					{{chooseAddress.latitude}}
				</view>
				<text>经度：</text>
				<view class="value-wrapper">
					{{chooseAddress.longitude}}
				</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				getAddress:{},
				chooseAddress:{},
			};
		},
		methods:{
			handlrGetLoacation: function(){
				const self = this;
				uni.getLocation({
					success: function(res){
						console.log(res);
						self.getAddress = res;
					},
					fail: function(res){
						console.log(res)
					}
				})
				
			},
			handleChooseLocation: function(){
				const self = this;
				uni.chooseLocation({
					success: function(res){
						console.log(res)
						self.chooseAddress = res
					},
					fail: function(res){
						console.log(res)
					}
				})
			},
			
			getUserInfo: function(value){
				console.log("按键开放功能--获取用户信息");
				console.log(value)
			},
			
			// 
			getUserphone: function(phone){
				console.log("按键开放功能--获取用户手机号");
				console.log(phone);
			},
		}
	}
</script>

<style lang="scss">
.page-wrapper{
		padding: 0 15rpx;
		
		.btn-group{
			display: grid;
			grid-template-columns: 1fr 1fr;
			grid-column-gap: 10rpx;
			grid-row-gap: 10rpx;
			.btn-wrapper{
				font-size: 0.7rem;
				// padding: 10rpx;
			}
		}
		.address-view{
			
			.value-wrapper{
				background-color: lightBlue;
			}
		}
	}
</style>
